<template>
  <div v-if="Object.keys(list).length !==0">
      <Title title="产品管理"></Title>
      <div class="product">
          <!-- 左侧audio -->
          <div class="video">
                <video :src="this.list[0].fileUrl" controls></video>
          </div>
          <!-- 右侧信息 -->
          <div class="minute">
                <img src="../../assets/images/Rectangle 6备份.png" alt="">
                <p class="titleName">
                    {{this.list[0].fileName}}
                </p>
                <div class="xian"></div>
                <p class="mes">
                    信息
                </p>
                <div class="neirong">
                    <p style="float: left">创建时间</p>
                    <p style="float: right">{{this.list[0].createDate}}</p>
                </div>
                <div class="neirong">
                    <p style="float: left">修改时间</p>
                    <p style="float: right">{{this.list[0].updateDate}}</p>
                </div>
                <div class="neirong">
                    <p style="float: left">持续时间</p>
                    <p style="float: right">45:57</p>
                </div>
                <div class="neirong">
                    <p style="float: left">内容创作者</p>
                    <p style="float: right">{{this.list[0].operator}}</p>
                </div>
                <div class="neirong">
                    <p style="float: left">大小</p>
                    <p style="float: right">{{this.list[0].fileSize}}</p>
                </div>
                <div class="neirong">
                    <p style="float: left">文件类型</p>
                    <p style="float: right">.mp4</p>
                </div>
            </div>
      </div>
  </div>
</template>

<script>
import Title from '../../components/title';
import "swiper/dist/css/swiper.min.css";
import {queryProduct} from "../../api/api";
export default {
  name: 'ProductView',
  components: {
      Title
  },
  data() {
    return {
      list:[]
    };
  },
  mounted() {
      queryProduct(this.$route.query.id).then(res=>{
          console.log(res)
          this.list = res.list
      })
  },
  methods: {
    change(){
        var audio=this.$refs.music[0]
        // var audio=document.getElementsByClassName("music")[0]
        if(audio.paused){
                        audio.play()
                    }
                    else{
                        audio.pause()
                    }
            }
  },
};
</script>

<style lang="less" scoped>
    .product {
        width: 1136px;
        height: 758px;
        border-radius: 2px;
        border: 1px solid #E9E9E9;
    }

    .video{
        width: 782px;
        height: 526px;
        margin-left: 40px;
        margin-top: 36px;
        float: left;
        video {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
    }
    }

    /*右侧详细信息*/
    .minute {
        width: 266px;
        height: 758px;
        float: right;
        background: #FFFFFF;
        text-align: center;
    }

    img {
        width: 214px;
        height: 110px;
        margin-top: 19px;
    }

    .titleName {
        width: 224px;
        margin-left: 19px;
        margin-top: 16px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        /*line-height: 22px;*/
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xian {
        width: 220px;
        height: 1px;
        background: #E8E8E8;
        margin: 16px auto;
    }

    .mes {
        width: 28px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 22px;
        margin-left: 19px;
        margin-bottom: 8px;
    }

    .neirong {
        width: 220px;
        height: 38px;
        margin: 0 auto;
        border-bottom: 1px solid #E8E8E8;
        p{
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            line-height: 22px;
            margin-top: 8px;
            margin-bottom: 0;
        }

    }
</style>
